<!DOCTYPE html>
<html   xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head/>
    <h:body>
        <p:dataGrid var="car" value="#{carBean.cars}" columns="2" rows="3" paginator="true">
            <p:column>
                <p:panel header="#{car.model}">
                    <h:panelGrid columns="2">
                        <h:outputText value="ID:"/>
                        <h:outputText value="#{car.id}"/>
                        <h:outputText value="Manufacturer:"/>
                        <h:outputText value="#{car.manufacturer}"/>
                        <h:outputText value="Model:"/>
                        <h:outputText value="#{car.model}"/>
                        <h:outputText value="Year:"/>
                        <h:outputText value="#{car.year}"/>
                    </h:panelGrid>
                </p:panel>
            </p:column>
        </p:dataGrid>
        
        <p:dataGrid var="car" value="#{carBean.cars}" columns="2" rows="3" paginator="true" paginatorTemplate="{CurrentPageReport} {MyContent}">
            <p:column>
                <p:panel header="#{car.model}">
                    <h:panelGrid columns="2">
                        <h:outputText value="Special:"/>
                        <f:facet name="{MyContent}">
                        Doodle Doodle Ding!!!
                        </f:facet>
                        <h:outputText value="ID:"/>
                        <h:outputText value="#{car.id}"/>
                        <h:outputText value="Manufacturer:"/>
                        <h:outputText value="#{car.manufacturer}"/>
                        <h:outputText value="Model:"/>
                        <h:outputText value="#{car.model}"/>
                        <h:outputText value="Year:"/>
                        <h:outputText value="#{car.year}"/>
                    </h:panelGrid>
                </p:panel>
            </p:column>
        </p:dataGrid>
    </h:body>
    
    <h:form id="carForm">
        <p:dataGrid var="car" value="#{carBean.cars}" columns="3" rows="12">
            <p:panel header="#{car.model}">
                <p:commandLink update=":carForm:display" oncomplete="PF('dlg').show()">
                    <f:setPropertyActionListener value="#{car}" target="#{carBean.selectedCar}"/>
                    <h:outputText value="#{car.model}" />
                </p:commandLink>
            </p:panel>
        </p:dataGrid>
        <p:dialog modal="true" widgetVar="dlg">
            <h:panelGrid id="display" columns="2">
                <f:facet name="header">
                    <p:graphicImage value="/images/cars/#{car.manufacturer}.jpg"/>
                </f:facet>
                <h:outputText value="Model:" />
                <h:outputText value="#{carBean.selectedCar.year}" />
                //more selectedCar properties
            </h:panelGrid>
        </p:dialog>
    </h:form>
</html>
